localStroage, sessionStrage

❓질문

localStorage와 sessionStorage의 차이점에 대해서 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

로컬스토리지와 세션스토리지 모두 브라우저에서 제공하는 저장소 API입니다.
둘의 차이점은 가지고있는 타이밍과 사용가능한 범위에 있습니다.
먼저 로컬스토리지는 데이터를 영구적으로 저장합니다. 브라우저를 닫거나 컴퓨터를 껏다켜도 스토리지를 삭제하지않는한 데이터가 유지됩니다. 그리고 동일한 도메인내에서 데이터를 공유할 수 있습니다.
반면 세션스토리지는 데이터를 해당 탭이 켜져있을때만 유지합니다. 그리고 같은 도메인이여도 탭간 공유가 되지않습니다.

🏫 정리한 내용

간단하게 내용을 보충하자면

로컬스토리지는 영구적인 데이터 저장과 도메인내의 사용으로 다크모드같은 테마 설정이나 장바구니 데이터와 같이 장기적으로 유지해야하는 데이터 저장에 적합니다.
반면 세션스토리지는 로그인 후 인증데이터를 일시적으로 저장하거나, 특정탭에서만 사용할 데이터를 관리하는데 용의합니다.

그리고 둘다 브라우저에 남는다는 이유로 보안상에 주의할점이 있습니다.
브라우저 저장소는 데이터를 암호화하거나 보호할 방법이 기본적으로 제공되지 않기 때문에 민감한 데이터를 직접 저장하지 않는 것이 가장 중효합니다.
인증 토큰이나 사용자 비밀번호는 스토리지 보단 Http-Only 쿠키를 사용하는것이 좋습니다 자바스크립트로 접근할 수 없으므로 XSS 공격에 대한 위험을 줄일 수 있습니다.